<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-12-20 17:25:21
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-29 14:10:51
-->
<template>
  <el-popover ref="moduleCheck" placement="bottom" title="" height="500" trigger="click" :value="isVisble">
    <div class="swtich-moudle" slot="reference" @click="handleOpen">
      <div class="org-title">
        <!-- <span class="org-icon">
          <em class="iconfont icon-a-Property1zuzhipeizhi"></em>
          
        </span> -->
        <em class="iconfont icon-Vector"></em>
        <!-- <img src="../../../common/assets/images/org.png" alt="" /> -->
        <span>{{ checkName || '点击切换模块' }}</span>
      </div>
      <em class="el-icon-caret-bottom"></em>
    </div>
    <!-- <el-tree
      ref="selecTree"
      :data="options"
      :node-key="defaultProps['value']"
      :props="defaultProps"
      :expand-on-click-node="false"
      @current-change="handleNodeClick"
      :placeholder="$t('system.user.pleaseSelect')"
    ></el-tree> -->
    <el-cascader-panel
      v-model="checkVal"
      ref="selectTree"
      :show-all-levels="false"
      :options="options"
      :props="{ ...defaultProps, ...otherPorps }"
      @change="handleChange"
    ></el-cascader-panel>
  </el-popover>
</template>
<script>
  export default {
    props: {
      options: {
        type: Array,
        default: () => []
      },
      defaultProps: {
        type: Object,
        default: () => {
          return { children: 'children', label: 'label', value: 'value' }
        }
      },
      currentNode: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        checkVal: '',
        checkName: '',
        isVisble: false,
        otherPorps: {
          emitPath: false
          // lazy: true,
          // lazyLoad(node, resolve) {
          //   if (!node.data.children.length) {
          //     delete node.data.children
          //   }
          //   resolve(node)
          // }
        }
      }
    },
    watch: {
      currentNode: {
        handler(val) {
          if (val && val.value !== this.checkVal) {
            this.checkVal = val.value
            this.$nextTick(() => {
              const result = this.$refs.selectTree.getCheckedNodes()
              if (result && result?.length && result[0]) {
                this.checkName = result[0].data[this.defaultProps.label]
              }
            })
          }
        },
        immediate: true,
        deep: true
      }
    },
    beforeDestroy() {
      console.log('beforeDestroy---组件销毁')
      this.checkVal = ''
      this.checkName = ''
    },
    methods: {
      handleOpen() {
        this.isVisble = !this.isVisble
      },
      handleChange() {
        const result = this.$refs.selectTree.getCheckedNodes()
        this.checkName = result[0].data[this.defaultProps.label]
        this.$emit('handleResetNode', { label: this.checkName, value: this.checkVal })
        this.$refs.moduleCheck.showPopper = false
        this.isVisble = false
      }
      // handleNodeClick(data) {
      //   this.checkVal = data[this.defaultProps.value]
      //   this.checkName = data[this.defaultProps.label]
      //   this.$emit('handleResetNode', { label: data[this.defaultProps.label], value: data[this.defaultProps.value] })
      //   this.$refs['moduleCheck'].showPopper = false
      //   this.isVisble = false
      // }
    }
  }
</script>
<style lang="scss" scoped>
  .swtich-moudle {
    font-size: 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    // margin: 6px 0;
    padding: 0 6px;
    color: #333;
    border-radius: 3px;

    &:hover,
    :focus,
    :active,
    :visited {
      background-color: rgb(126 134 142 / 12%);
    }

    .org-title {
      flex: 3;
      display: flex;
      align-items: center;
      &:hover,
      :focus,
      :active,
      :visited {
        background-color: transparent;
      }
      span {
        padding-left: 3px;
        &:hover,
        :focus,
        :active,
        :visited {
          background-color: transparent;
        }
      }
      span.org-icon {
        background-color: rgb(173, 185, 192);
        height: 20px;
        width: 20px;
        display: flex;
        align-items: center;
        &:hover,
        :focus,
        :active,
        :visited {
          background-color: transparent;
        }
      }
    }

    img {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      border-radius: 3px;
      &:hover,
      :focus,
      :active,
      :visited {
        background-color: transparent;
      }
    }
    em.iconfont.icon-a-Property1zuzhipeizhi {
      color: #fff;
      &:hover,
      :focus,
      :active,
      :visited {
        background-color: transparent;
      }
    }
    em {
      line-height: 36px;
    }
  }

  .visble-select {
    visibility: hidden;
  }
</style>
